<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Test</title>
	<style>
body {
	border: none;
	margin: 0;
	padding: 0;
}

#mainWrapper {
	margin-left: auto;
	margin-right: auto;
	width: 1008px;
}

.ui-widget {
	font-size: 12px;
}

.ui-panel .ui-panel-content {
	padding: 0.5em 0.3em;
}

.ui-panelgrid td {
	border: none;
}

.ui-panelgrid tr {
	border: none;
}

.topLeftContainer {
	width: 49%;
	float: left;
}

.topRightContainer {
	width: 49%;
	float: left;
}

.mainContainer {
	
}

.clear {
	clear: both;
}

.myTaskColumnId {
	width: 15px;
	text-align: right;
}

.myTaskColumnPriority {
	width: 45px;
	text-align: right;
}
</style>
</h:head>
<h:body>
	<div id="mainWrapper">
		<!-- My Task Panel -->
		<p:panel id="myTasksContainer" header="My Active Tasks"
			toggleable="true" closable="false" toggleSpeed="500"
			closeSpeed="2000" widgetVar="myTasksPanel"
			styleClass="topLeftContainer">

			<h:form prependId="false">
				<p:dataTable var="task" value="#{myTaskWebBean.tasks}">
					<p:column styleClass="myTaskColumnId">
						<f:facet name="header">ID</f:facet>
						<h:outputText value="#{task.id}" />
					</p:column>

					<p:column styleClass="myTaskColumnPriority">
						<f:facet name="header">Priority</f:facet>
						<h:outputText value="#{task.priority.value}" />
					</p:column>

					<p:column>
						<f:facet name="header">Title</f:facet>
						<h:outputText value="#{task.title}" />
					</p:column>

				</p:dataTable>
			</h:form>
		</p:panel>

		<!-- My Schedule Panel -->
		<p:panel id="myScheduleContainer" header="My Calendar"
			toggleable="true" closable="false" toggleSpeed="500"
			closeSpeed="2000" widgetVar="mySchedulePanel"
			styleClass="topRightContainer">
			<p:calendar mode="inline" />
		</p:panel>

		<div class="clear"></div>

		<!-- Search Panel -->
		<p:panel id="searchContainer" header="Task Search" toggleable="true"
			closable="false" toggleSpeed="500" closeSpeed="2000"
			widgetVar="searchPanel" styleClass="mainContainer">
			<h:form prependId="false">

				<p:panelGrid>
					<p:row>
						<p:column>
							<h:outputText value="ID:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
						<p:column>
							<h:outputText value="Title:"></h:outputText>
						</p:column>
						<p:column colspan="5">
							<h:inputText></h:inputText>
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<h:outputText value="Status:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
						<p:column>
							<h:outputText value="Priority:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
						<p:column>
							<h:outputText value="Feature:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
						<p:column>
							<h:outputText value="Reporter:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputText value="Assignee:"></h:outputText>
						</p:column>
						<p:column>
							<h:inputText></h:inputText>
						</p:column>
					</p:row>
				</p:panelGrid>

				<p:dataTable var="task" value="#{myTaskWebBean.tasks}">

					<p:column styleClass="myTaskColumnId">
						<f:facet name="header">ID</f:facet>
						<h:outputText value="#{task.id}" />
					</p:column>

					<p:column>
						<f:facet name="header">Priority</f:facet>
						<h:outputText value="#{task.priority.value}" />
					</p:column>

					<p:column>
						<f:facet name="header">Title</f:facet>
						<h:outputText value="#{task.title}" />
					</p:column>

					<p:column>
						<f:facet name="header">Reporter</f:facet>
						<h:outputText value="#{task.reporter.value}" />
					</p:column>

					<p:column>
						<f:facet name="header">Assignee</f:facet>
						<h:outputText value="#{task.assignee.value}" />
					</p:column>

				</p:dataTable>
			</h:form>
		</p:panel>
	</div>
</h:body>
</html>

